<div id="sysResource" class="xy-layout">
    <div class="xy-layout-west" data-options="split:true,width:'50%',border:false">
        <div class="layui-colla-item">
            <!--标题-->
            <div class="layui-colla-title">
                <div class="xy-toolbar">
                    <div class="xy-toolbar-btn">系统列表
                        <button class="layui-btn layui-btn-sm" data-type="add"><i class="layui-icon"></i>修改</button>
                        <button class="layui-btn layui-btn-sm" data-type=""><i class="layui-icon">&#xe654;</i>添加
                        </button>
                        <button class="layui-btn layui-btn-sm" data-type=""><i class="layui-icon"></i>删除</button>
                    </div>

                    <div class="xy-toolbar-search">
                        <div class="layui-input-inline">
                            <input type="text" name="name" placeholder="支持模糊查询.." autocomplete="off"
                                   class="layui-input"/>
                        </div>
                        <button lay-filter="search" class="layui-btn layui-btn-sm" data-type="search">
                            <i class="layui-icon">&#xe615;</i>查询
                        </button>
                    </div>
                </div>
            </div>
            <div class="layui-colla-content layui-show xy-table">
                <table class="layui-hide" lay-filter="test" id="resData"></table>
            </div>
        </div>
    </div>
    <!--右上方开始-->
    <div class="xy-layout-center" data-options="border:false">
        <div class="layui-colla-item">
            <div class="layui-colla-title">
                <div class="xy-toolbar">
                    <div class="xy-toolbar-btn">资源列表
                        <button class="layui-btn layui-btn-sm" data-type="add"><i class="layui-icon"></i>修改
                        </button>
                        <button class="layui-btn layui-btn-sm" data-type=""><i class="layui-icon">&#xe654;</i>添加
                        </button>
                        <button class="layui-btn layui-btn-sm" data-type=""><i class="layui-icon"></i>删除
                        </button>
                    </div>
                </div>
            </div>
            <div class="layui-colla-content layui-show">
                <ul id="treeDemo" style="overflow:auto;height: 100%;"></ul>
            </div>
        </div>
    </div>
    <!--右上方结束-->
    <!--右下方开始-->
    <div class="xy-layout-south" data-options="height:'50%',border:false">
        <div class="layui-colla-item">
            <div class="layui-colla-title">
                <div class="xy-toolbar">
                    <div class="xy-toolbar-btn">权限列表
                        <button class="layui-btn layui-btn-sm" data-type="add"><i class="layui-icon"></i>修改
                        </button>
                        <button class="layui-btn layui-btn-sm" data-type=""><i class="layui-icon">&#xe654;</i>添加
                        </button>
                        <button class="layui-btn layui-btn-sm" data-type=""><i class="layui-icon"></i>删除
                        </button>
                    </div>

                    <div class="xy-toolbar-search">
                        <div class="layui-input-inline">
                            <input type="text" name="name" placeholder="支持模糊查询.." autocomplete="off"
                                   class="layui-input"/>
                        </div>
                        <button lay-filter="search" class="layui-btn layui-btn-sm" data-type="search">
                            <i class="layui-icon">&#xe615;</i>查询
                        </button>
                    </div>
                </div>
            </div>
            <div class="layui-colla-content layui-show xy-table">
                <table class="layui-hide" lay-filter="test" id="authData" ></table>
            </div>
        </div>
    </div>
    <!--右下方结束-->
</div>

<script type="text/javascript" src="../../static/zTree/zTree.js" th:src="@{/zTree/zTree.js}"/>
<script>
    $(function () {
        layout.initLayout("#sysResource",{fit:true});
//        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
//        $("#callbackTrigger").bind("change", {}, setTrigger);
        $('#treeDemo').tree({
            url:'/structure/structureTree',
            dnd:true,
            onClick:function (node) {
                console.info(node)
            }
        });
    });
    layui.use(['element', 'table', 'jquery'], function () {
        var element = layui.element, $ = layui.jquery, table = layui.table;

        //第一个实例
        table.render({
            elem: '#resData'
            , url: '/structure/listUserByStructure' //数据接口
            , even: true
            , skin: 'row'
            , id: 'sysData'
            , cols: [[ //表头
                {type: 'numbers'}
                , {type: 'checkbox'}
                , {field: 'id', title: 'ID', width: 80, sort: true}
                , {field: 'username', title: '用户名', width: 80}
                , {field: 'sex', title: '性别', width: 80, sort: true}
                , {field: 'sign', title: '签名', width: 177}
                , {field: 'experience', title: '积分', width: 80, sort: true}
                , {field: 'score', title: '评分', width: 80, sort: true}
            ]]
            , page: true //开启分页
            , done: function (res, curr, count) {//数据渲染完成后的回掉函数

            }
        });
        //第一个实例
        table.render({
            elem: '#authData'
            , url: '/structure/listUserByStructure' //数据接口
            , even: true
            , skin: 'row'
            , id: 'sysData'
            , cols: [[ //表头
                {type: 'numbers'}
                , {type: 'checkbox'}
                , {field: 'id', title: 'ID', width: 80, sort: true}
                , {field: 'username', title: '用户名', width: 80}
                , {field: 'sex', title: '性别', width: 80, sort: true}
                , {field: 'sign', title: '签名', width: 177}
                , {field: 'experience', title: '积分', width: 80, sort: true}
                , {field: 'score', title: '评分', width: 80, sort: true}
            ]]
            , page: true //开启分页
            , done: function (res, curr, count) {//数据渲染完成后的回掉函数

            }
        });
    });
</script>
